<script setup>
	import Breadcurmb from './breadcrumb.vue'
	import UserDropdown from './user-dropdown.vue'
	import { computed } from 'vue'
	import { useStore } from 'vuex'
	import { useRoute } from 'vue-router'
	const store = useStore()
	const route = useRoute()
	
	// 是否收缩菜单
	const collapse = computed(() => store.state.app.collapse)
	// 是否显示菜单
	const showMenu = computed(() => store.state.app.showMenu)
	// 点击收缩图标按钮
	const clickCollapseIcon = function (type) {
		if (type == 1) {
			store.commit('app/setCollapse', collapse.value == 1 ? 0 : 1)
		} else if (type == 2) {
			store.commit('app/setShowMenu', 1)
		}
	}
	// 点击遮罩
	const clickMask = function () {
		store.commit('app/setShowMenu', 0)
	}
</script>

<template>
	<div class="logo-wrap">
		<img src="/src/assets/images/logo.png" width="30">
	</div>
	<div
		class="collapse-icon-wrap pc"
		:class="{ collapse: collapse == 1 }"
		@click="clickCollapseIcon(1)"
	>
		<el-icon><fold /></el-icon>
	</div>
	<div
		class="collapse-icon-wrap mobile"
		@click="clickCollapseIcon(2)"
	>
		<el-icon><fold /></el-icon>
	</div>
	<div class="crumbs-wrap">
		<Breadcurmb />
	</div>
	<div class="avatar-wrap">
		<UserDropdown />
	</div>
	<div 
		class="mobile-mask"
		:class="[ showMenu == 1 ? 'show' : 'hide' ]"
		@click="clickMask"
	></div>
</template>

<style scoped lang="less">
	.logo-wrap {
		height: 50px;
		display: none;
		align-items: center;
		justify-content: center;
	}
	.collapse-icon-wrap {
		display: flex;
		font-size: 20px;
		cursor: pointer;
		padding: 10px 10px;
		&.collapse {
			transform: rotate(180deg);
		}
		&.mobile {
			display: none;
			transform: rotate(180deg);
		}
	}
	.crumbs-wrap {
		margin-left: 10px;
	}
	.avatar-wrap {
		margin-left: auto;
	}
	
	.mobile-mask {
		display: none;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .3);
		z-index: 9;
	}
	
	@media screen and (max-width: 768px) {
		.logo-wrap {
			display: flex;
		}
		.collapse-icon-wrap {
			&.mobile {
				display: flex;
			}
			&.pc {
				display: none !important;
			}
		}
		.crumbs-wrap {
			display: none;
		}
		
		.mobile-mask {
			&.show {
				display: block;
			}
			&.hide {
				display: none;
			}
		}
	}
</style>
